<template>
    <div @click="handClick" :class="select.isHit ? 'title2' : 'title'" :style="myStyles">
        <div class="pd" :class="select.isSelect ? 'pd2' : ''">{{ select.nowSelectName }}</div>
        <img class="imgRow pd" v-if="!isShowSortImg&&!isLock" src="../../assets/images/upRow.svg">
        <img class="imgSort pd" v-if="isShowSortImg" src="../../assets/images/sort.svg">

        <div class="popup" v-if="show" :style="myStyles">
            <div class="item_name" v-for="s in dataList" v-bind:key="s.name" @click="selectItem(s)">
                <div v-if="s.name === select.nowSelectName" class="item_name_default">{{ s.name }}</div>
                <div v-else>{{ s.name }}</div>
            </div>
        </div>
    </div>

    <div class="overlay" v-if="show" @click="handClick"></div>
</template>
    
<script>

export default {
    name: 'CommonSelectRouter',
    emits: ['returnData'],
    components: {
    },
    props: {
        dataList: Array,
        default: String,
        isShowSortImg: {
            default: false,
            type: Boolean
        },
        myStyles: {
            default: { width: '170px' }
        },
        isLock: Boolean
    },
    data() {
        return {
            show: false,
            select: {
                isSelect: false,
                nowSelectName: this.default,
            }
        }
    },
    mounted() {
    },
    methods: {
        handClick() {
            if (!this.isLock) {
                this.show = !this.show
                if (this.show) {
                    this.$nextTick(() => {
                        const popupEl = document.querySelector('.popup');

                        // 如果找到了弹出框元素
                        if (popupEl) {
                            // 计算弹出框底部距离窗口底部的距离
                            const bottomDist = popupEl.getBoundingClientRect().bottom - window.innerHeight;
                            // 如果底部距离小于弹出框高度，说明弹出框被遮挡，需要向上移动
                            if (bottomDist > 30) {
                                // 修改弹出框的样式，将其向上移动
                                popupEl.style.top = `-250px`;
                            } else {
                                // 如果不被遮挡，清除样式，恢复原位置
                                popupEl.style.top = 'none';
                            }
                        }
                    })
                }
            }
        },
        selectItem(s) {
            this.select = {
                isSelect: true,
                nowSelectName: s.name,
            }
            this.$emit('returnData', s.id);
        },
    },
    watch: {
        default: {
            handler() {
                this.select.nowSelectName = this.default
            }
        }
    },
    computed: {
    }

}
</script>
    
<style scoped>
.df {
    display: flex;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    font-size: 15px;
    border-radius: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
    color: black;
    margin: 1px;
    position: relative;
}

.title2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border: 1px solid red;
    font-size: 12px;
    width: 120px;
    border-radius: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
    color: rgb(153, 153, 153);
    margin: 1px;
    position: relative;
}

.pd {
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
    font-weight: 600;
}

.pd2 {
    color: black;
}

.pd3 {
    padding-left: 15px;
    padding-right: 10px;
    color: red;
}

.pd3::before {
    content: '*';
    color: red;
    position: absolute;
    left: 9px;
    margin-top: 4px;
}

.popup {
    position: absolute;
    background: white !important;
    border: 1px solid #eee;
    box-shadow: 1px 1px 15px #e5e5e5;
    z-index: 1;
    font-size: 15px;
    margin-top: 1px;
    top: 25px;
    max-height: 250px;
    overflow: auto;
}

.right_T {
    float: right;
    color: black;
    position: relative;
}

.imgRow {
    width: 10px;
    height: 10px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    padding-left: 5px;
}

.imgSort {
    width: 20px;
    height: 20px;
}

.item_name {
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: black;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
}

.item_name:hover {
    background-color: #eee;
}

.item_name_default {
    color: #6698ff;
}
</style>